<template>
  <div
    class="home-strihp-box"
    :style="{ backgroundImage: 'url(' + getBgImage + ')' }"
  >
    <div class="strihp-color-bg" :style="{ background: getBgColor }">
      <left-block :activeColor="color"><b>学院日历</b></left-block>
      <home-strihp-right></home-strihp-right>
    </div>
  </div>
</template>

<script>
import HomeStrihpRight from "./HomeStrihpRight.vue";
export default {
  name: "SecondPage",
  components: {
    HomeStrihpRight,
  },
  beforeDestroy() {
    this.$store.commit("ruler/indexChange", 1);
  },
  computed: {
    // 跳转,变化后修改背景色
    getBgColor: function () {
      const map = new Map([
        [2, "rgba(192,44,56,0.5)"],
        [3, "rgba(251,153,102,0.7)"],
      ]);
      let color = map.get(this.$store.state.ruler.index);
      return color;
    },
    // 跳转,变化后修改背景图片
    getBgImage: function () {
      let bol = this.$store.state.ruler.index;
      bol = bol ? bol : 1;
      return this["bgUrl" + bol];
    },
  },
  data() {
    return {
      color: "rgba(37,62,130,0.9)",
      bgColor: "rgba(67,76,114,0.5)",
      bgUrl1:
        "https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg1_new.jpg",
      bgUrl2:
        "https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg2_new.jpg",
      bgUrl3:
        "https://tyut-calendar.oss-accelerate.aliyuncs.com/newimg/bg3_new.jpg",
    };
  },
};
</script>

<style lang="less" scoped>
.strihp-color-bg {
  background-color: rgba(67, 76, 114, 0.5);
  display: flex;
  transition: all 0.75s;
}
.home-strihp-box {
  width: 100%;
  height: 100vh;
  .bg-maker();
  transition: all 0.75s;
}
@media screen and (max-width: 480px) {
  .strihp-color-bg {
    flex-direction: column;
  }
}
</style>
